<template>
  <div class="app-container">
    <el-table
      :key="colNums"
      :data="tableData"
      style="width: 100%"
      fit
      highlight-current-row
      :span-method="arraySpanMethod"
    >
      <el-table-column type="index" min-width="30" align="center" />
      <el-table-column prop="name" label="自定义价格" sortable width="50" align="center" />
      <el-table-column min-width="150" align="center">
        <template slot="header" slot-scope="scope">
          <div class="headeradd">
            <label>概率</label>
            <i
              class="el-icon-circle-plus"
              @click="addCol"
            />
            <i
              class="el-icon-circle-plus"
              @click="expandCol"
            />
          </div>
        </template>
        <el-table-column label="前台概率" width="80" sortable align="center">
          <el-table-column prop="name" label="x" width="30" align="center">
            <el-table-column width="30" align="center">
              <template slot="header">
                <span> 878 </span>
              </template>
              <template slot-scope="scope">
                <span> {{ scope.row.name }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" label="y" width="30" align="center">
            <el-table-column prop="name" width="30" align="center" />
          </el-table-column>
          <el-table-column prop="name" label="z" width="30" align="center">
            <el-table-column prop="name" width="30" align="center" />
          </el-table-column>
          <el-table-column prop="name" label="r" width="30" align="center">
            <el-table-column prop="name" width="30" align="center" />
          </el-table-column>
        </el-table-column>

        <el-table-column
          v-for="(col,index ) in cols"
          :key="col.index"
          min-width="80"
          align="center"
        >
          <template slot="header" slot-scope="scope">
            <div>
              <label>概率</label>
              <i
                class="el-icon-remove"
                @click="removeCol(index)"
              />
            </div>
          </template>
          <el-table-column prop="name" label="x" min-width="30" align="center">
            <el-table-column width="30" align="center" />
          </el-table-column>
          <el-table-column prop="name" label="y" width="30" align="center">
            <el-table-column width="30" align="center">
              <template slot="header">
                <!-- <span>{{ (price * rebate / 100 / (1 + profitList[index + 3] / 100)).toFixed(2) }} </span> -->
                <span>{{ testList[index+1] }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" label="z" width="30" align="center">
            <el-table-column prop="name" width="30" align="center" />
          </el-table-column>
          <el-table-column prop="name" label="r" width="30" align="center">
            <el-table-column prop="name" width="30" align="center" />
          </el-table-column>
        </el-table-column>

      </el-table-column>
      <el-table-column label="饰品属性" align="center">
        <el-table-column prop="name" label="分类" width="80" align="center" show-overflow-tooltip />
        <el-table-column prop="address" label="类别" width="80" align="center" show-overflow-tooltip />
        <el-table-column prop="province" label="品质" width="80" align="center" show-overflow-tooltip />
      </el-table-column>
      <el-table-column prop="icon-name" label="所在箱子" width="80" align="center" show-overflow-tooltip />
    </el-table>

  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      testList: [],
      tableData: [{
        date: '2016-05-03',
        name: 6,
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '2016-05-02',
        name: 7,
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '2016-05-02',
        name: 8,
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      cols: [],
      // 添加动态列
      startIndex: 2, // 固定列起始index
      colNums: 1, // 固定列个数
      columnIndexArry: [],
      columnStartIndexArry: [],
      columnEndIndexArry: []
    }
  },
  created() {
    this.generateIndexArry()
  },
  methods: {
    generateIndexArry() {
      for (let i = 0; i < this.colNums * 4; i++) {
        this.columnIndexArry.push(this.startIndex++)
      }
      this.startIndex = 2
      for (let i = 0; i < this.columnIndexArry.length; i++) {
        if (i % 4 === 0 && i !== this.columnIndexArry.length - 1) {
          this.columnStartIndexArry.push(this.columnIndexArry[i])
        } else {
          this.columnEndIndexArry.push(this.columnIndexArry[i])
        }
      }
      this.$log('需要清零：' + this.columnEndIndexArry)
      this.$log('需要合并：' + this.columnStartIndexArry)
    },
    addCol() {
      this.columnIndexArry = []
      this.columnStartIndexArry = []
      this.columnEndIndexArry = []
      this.colNums++
      this.generateIndexArry()
      this.testList.push(this.colNums)
      this.cols.push(0)
      // this.tableData.map(item => {
      //   item.name = 9
      // })
      this.$log('--------start--------')
      this.$log(this.testList)
    },
    removeCol(index) {
      this.cols.splice(index, 1)
      this.testList.splice(index + 1, 1)
      this.$log('--------end--------')
      this.$log(this.testList)
      this.colNums--
      const length = this.columnStartIndexArry.length
      this.columnStartIndexArry.splice(length - 1, 1)
      this.$log(this.columnStartIndexArry)
    },
    expandCol() {

    },
    // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
    // 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。
    // 也可以返回一个键名为rowspan和colspan的对象。
    // colspan属性规定单元格可横跨的列数
    // rowspan属性规定单元格可横跨的行数
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // this.$log(columnIndex)
      for (var item of this.columnStartIndexArry) {
        // this.$log(item)
        if (columnIndex === item) {
          return [1, 4]
        } else if (columnIndex === item + 1 || columnIndex === item + 2 || columnIndex === item + 3) {
          return [0, 0]
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-icon{
    &-circle-plus, &-remove{
      font-size: 22px;
      color:#3b425d;
      margin-left: 10px;

   }
}
.headeradd{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
